<template>
    <div class="category-management">
        <h1>菜品分类管理</h1>
        <div class="search-container">
            <el-input
                v-model="searchQuery"
                placeholder="查询分类名称"
                style="width: 300px; margin-right: 20px;"
            />
            <el-button type="success" @click="showAddModal">+ 新增分类</el-button>
        </div>
        
        <el-table :data="filteredCategories" style="width: 100%">
            <el-table-column label="索引" width="80">
                <template slot-scope="scope">
                    {{ (page - 1) * size + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="分类名称"></el-table-column>
            <el-table-column prop="description" label="分类描述"></el-table-column>
            <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button @click="showEditModal(scope.row)" type="warning">修改</el-button>
                    <el-button @click="deleteCategory(scope.row.id)" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="size"
            :current-page="page"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />

        <!-- 新增/编辑分类模态框 -->
        <el-dialog :visible.sync="showModal" title="分类管理">
            <el-form>
                <el-form-item label="分类名称" required>
                    <el-input v-model="currentCategory.name" placeholder="请输入分类名称"></el-input>
                </el-form-item>
                <el-form-item label="分类描述" required>
                    <el-input v-model="currentCategory.description" placeholder="请输入分类描述"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeModal">取 消</el-button>
                <el-button type="primary" @click="saveCategory">{{ isEdit ? '更新' : '添加' }}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getCategories, addCategory, updateCategory, deleteCategory } from '@/api/category';

export default {
    name: 'CategoryManagement',
    data() {
        return {
            categories: [],
            searchQuery: '',
            showModal: false,
            isEdit: false,
            currentCategory: { id: null, name: '', description: '' },
            page: 1,
            size: 5,
            total: 0,
        };
    },
    computed: {
        filteredCategories() {
            return this.categories.filter(category =>
                category.name.includes(this.searchQuery)
            );
        },
    },
    methods: {
        // 获取分类列表
        async fetchCategories() {
            const response = await getCategories({ page: this.page, size: this.size });
            this.categories = response.records;
            this.total = response.total;
        },
        showAddModal() {
            this.isEdit = false;
            this.currentCategory = { id: null, name: '', description: '' };
            this.showModal = true;
        },
        showEditModal(category) {
            this.isEdit = true;
            this.currentCategory = { ...category };
            this.showModal = true;
        },
        async saveCategory() {
            if (this.isEdit) {
                await updateCategory(this.currentCategory.id, this.currentCategory);
            } else {
                await addCategory(this.currentCategory);
            }
            this.fetchCategories();
            this.closeModal();
        },
        async deleteCategory(id) {
            if (confirm('确定要删除该分类吗？')) {
                await deleteCategory(id);
                this.fetchCategories();
            }
        },
        closeModal() {
            this.showModal = false;
        },
        // 处理每页显示数量变化
        handleSizeChange(newSize) {
            this.size = newSize;
            this.fetchCategories();
        },
        // 处理当前页码变化
        handleCurrentChange(newPage) {
            this.page = newPage;
            this.fetchCategories();
        },
    },
    mounted() {
        this.fetchCategories();
    },
};
</script>

<style scoped>
.category-management {
    padding: 20px;
    background: #f5f7fa; /* 与菜单栏和头部一致的背景颜色 */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.search-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

/* 按钮样式 */
.el-button--success {
    background-color: #70edf6; /* 新增按钮颜色 */
    border-color: #70edf6;
}

.el-button--warning {
    background-color: #f4f14c; /* 修改按钮颜色 */
    border-color: #f4f14c;
}

.el-button--danger {
    background-color: #f56e89; /* 删除按钮颜色 */
    border-color: #f56e89;
}

.description {
    margin-bottom: 20px;
    color: #606266; /* 说明文字颜色 */
}
</style>
